<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<style type="text/css">
		* { margin: 0;padding: 0;}
		.calendar{width:100%;margin:10px 0px 20px 0px;color:#555;position: relative;}
		.calendar h4 {border-bottom: 2px solid #5bd999;text-align: center;font-size: 22px;font-weight: 700;margin-top: 10px;margin-bottom:0px;padding: 10px 0;}
		.calendar button {position: absolute;width: 24px;height: 24px;top: 15px;border: none;}
		.calendar button:focus { border: none;outline: none; }
		.calendar button.month-less {left: 20px;background: url(img/left-icon.png) no-repeat left -60px;}
		.calendar button.month-add {right: 20px;background: url(img/right-icon.png) no-repeat left -60px;}
		.calendar .sign_tab{width: 100%;border-collapse: collapse;border: 1px solid #e8e8e8;border-top: 0;table-layout: fixed;}
		.calendar .sign_tab th{text-align: center;height: 2.25rem;font-weight: 700;}
		.calendar .sign_tab td{border: 1px solid #e8e8e8;height: 2.25rem;text-align: center;font-size: 0.8rem;font-family: arial;}
		.calendar .sign_tab td.over{background-color: #fff;border-left: 0;border-right: 0;}
		.calendar .sign_tab td.red_tbg{background-color: #f8f8f8;color: #58ce7a;position:relative;}
		.red_tbg .ui-state-default {font-size: 0.6em;width: 100%;text-align: center; position: absolute;top:1.4rem;left: 0;}
		.calendar .sign_tab td.cur_day{background-color: #FFD2D2;color: #FFF;}
	</style>
</head>
<body>
	<div id="box" class="calendar"></div>
	<script type="text/javascript" src="calendar.js"></script>
	<script type="text/javascript">
		(function(doc,win){
			var docEl = doc.documentElement,
			resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
			recalc = function(){
				var clientWidth = docEl.clientWidth;
				if(!clientWidth) return;
				clientWidth = clientWidth > 640 ? 640 : clientWidth;
				docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
			};
			if(!doc.addEventListener) return;
			win.addEventListener(resizeEvt,recalc,false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document,window);

		var Calendar = new Calendar('box', {
			curDate: new Date(),
			getNextMonthArr: function() {
				return getRandom(20);
			},
			getPrevMonthArr: function() {
				return getRandom(5);
			}
		});
		Calendar.init([1,3,5]);


		Array.prototype.unique = function() {
			this.sort();
			var re = [this[0]];
			for(var i = 1; i <this.length; i++) {
				if(this[i] !== re[re.length-1]) {
					re.push(this[i]);
				}
			}
			return re;
		};

		function getRandom(len) {
			var arr = [];
			for(var i = 0; i < len; i++) {
				var ran = Math.floor(Math.random() * 30);
				arr.push(ran);
			}
			return arr.unique();
		};
	</script>
</body>
</html>